<template>
  <div class="home">
    <div class="main_text">
    <div class="left_text">总消费:￥{{this.obgrect['总消费']}}</div>
    <div class="right_text">总人数：{{this.obgrect['总人数']}}</div>
  </div>
    <div class="main_body">
      <div class="left_" id="main"></div>
      <div class="right_" id="maintwo"></div>
    </div>
  </div>
</template>
<script>
  export default {
    components: {},
    props: {
      obgrect: {
        type: Object
      }
    },
    data(){
      return {}
    },
    methods: {
      pagectbody(){
        let option = {
          backgroundColor: '#fff',
          series: [{
            type: 'pie',
            name: '',
            radius: [120, 150],
            hoverAnimation: false,
            silent: true,
            clockwise: false,
            data: [{
              value: 0,
              name: '',
              label: {
                normal: {
                  show: true,
                  position: 'center',
                  formatter: '用户消费',
                  color: '#fff',
                  fontSize: 20,
                  fontWeight: 'bold'
                }
              },
              itemStyle: {
                normal: {
                  color: '#ccc',
                  shadowBlur: 50,
                  shadowColor: 'yellow',
                  show: true
                }
              }
            }]
          },

            {
              type: 'pie',
              radius: [120, 120],
              hoverAnimation: false,
              silent: true,
              data: [{
                value: 0,
                name: '大',
                label: {
                  normal: {
                    show: true,
                    position: 'center',
                    formatter: '\n\n\n\n消费划分',
                    color: '#fff',
                    fontSize: 20,
                    fontWeight: 'bold'
                  }
                },
                itemStyle: {
                  normal: {
                    color: '#ccc',
                    shadowBlur: 50,
                    shadowColor: 'yellow',
                  }
                }
              }]
            }, {
              type: 'pie',
              radius: [80, 140],
              hoverAnimation: false,
              data: [{
                value: this.obgrect['一级总消费'],
                name: '一级总消费',
                label: {
                  normal: {
                    color: '#8b1406',
                    fontSize: 16,
                    formatter: '{b}：{c}\n\n比例：{d}%'
                  }
                },
                labelLine: {
                  normal: {
                    length: 60
                  }
                }
              }, {
                value: this.obgrect['二级总消费'],
                name: '二级总消费',
                label: {
                  normal: {
                    color: '#132a59',
                    fontSize: 16,
                    formatter: '{b}：{c}\n\n比例：{d}%'
                  }
                },
                labelLine: {
                  normal: {
                    length: 60
                  }
                }
              }]
            }
          ]
        };
        var myChart = this.$echarts.init(document.getElementById('main'));
        myChart.setOption(option);
      },
      pagectbodytwo(){
        let option = {
          backgroundColor: '#fff',
          series: [{
            type: 'pie',
            name: '',
            radius: [120, 150],
            hoverAnimation: false,
            silent: true,
            clockwise: false,
            data: [{
              value: 0,
              name: '',
              label: {
                normal: {
                  show: true,
                  position: 'center',
                  formatter: '用户人数',
                  color: '#fff',
                  fontSize: 20,
                  fontWeight: 'bold'
                }
              },
              itemStyle: {
                normal: {
                  color: '#ccc',
                  shadowBlur: 50,
                  shadowColor: 'yellow',
                  show: true
                }
              }
            }]
          },

            {
              type: 'pie',
              radius: [120, 120],
              hoverAnimation: false,
              silent: true,
              data: [{
                value: 0,
                name: '大',
                label: {
                  normal: {
                    show: true,
                    position: 'center',
                    formatter: '\n\n\n\n所在区域划分',
                    color: '#fff',
                    fontSize: 20,
                    fontWeight: 'bold'
                  }
                },
                itemStyle: {
                  normal: {
                    color: '#ccc',
                    shadowBlur: 50,
                    shadowColor: 'yellow',
                  }
                }
              }]
            }, {
              type: 'pie',
              radius: [80, 140],
              hoverAnimation: false,
              data: [{
                value: this.obgrect['一级代理人数'],
                name: '一级代理',
                label: {
                  normal: {
                    color: '#8b1406',
                    fontSize: 16,
                    formatter: '{b}：{c}\n\n比例：{d}%'
                  }
                },
                labelLine: {
                  normal: {
                    length: 60
                  }
                }
              }, {
                value: this.obgrect['二级代理人数'],
                name: '二级代理',
                label: {
                  normal: {
                    color: '#132a59',
                    fontSize: 16,
                    formatter: '{b}：{c}\n\n比例：{d}%'
                  }
                },
                labelLine: {
                  normal: {
                    length: 60
                  }
                }
              }]
            }
          ]
        };
        var myChart = this.$echarts.init(document.getElementById('maintwo'));
        myChart.setOption(option);
      },

    },
    watch: {
      obgrect(r,i){
        this.pagectbody();
        this.pagectbodytwo();


      }
    },
    computed: {
      //计算属性
    },
    mounted(){
      this.pagectbody();
      this.pagectbodytwo();
    }
  }
</script>
<style scoped>
  .home {
    width: 100%;
    /*height: 100%;*/
  }
  .main_text{
    width: 100%;
    height: 50px;
    /*background: red;*/
  }
  .main_text div{
    width: 50%;
    height: 100%;
    float: left;
    text-align: center;
    line-height: 50px;
  }

  .main_body {
    width: 100%;
    height:80%;
  }

  .left_ {
    float: left;
    width: 50%;
    height: 450px;
  }

  .right_ {
    float: left;
    width: 50%;
    height: 450px;
  }
</style>
